import { Layout, Affix } from 'antd'

import PC from '@/components/reposive/pc'
import IsMd from '@/components/reposive/is-md'
import HeadApp from '@/components/head-app/index'
import SizeShower from '@/components/screen-size/index'
import BigContent from '@/components/big-content/index'
import MainContent from '@/components/main-content/index'
import BottomSignInSignUp from '@/components/bottom-signin-signup/index'
// import AppFooter from '@/components/footer/index'
import AppFooter from '@/components/footer/index-new'

const { Header, Content, Footer } = Layout

export default function Home() {
  return (
    <>
      <Layout style={{ minHeight: '100vh' }}>
        <PC>
          <Header
            style={{
              backgroundColor: 'whitesmoke',
              borderBottom: '1px solid gray',
            }}
          >
            <HeadApp />
          </Header>
        </PC>
        <IsMd>
          <Affix offsetTop={0}>
            <Header
              style={{
                backgroundColor: 'whitesmoke',
                borderBottom: '1px solid gray',
              }}
            >
              <HeadApp />
            </Header>
          </Affix>
        </IsMd>

        <Content style={{ padding: '5% 5% 1%' }}>
          <BigContent />
          <MainContent />
          <BottomSignInSignUp />
        </Content>

        <Footer>
          <AppFooter />
        </Footer>
      </Layout>
    </>
  )
}
